<template>
  <div class="mui-content">
    <header class="mui-bar mui-bar-nav flex-between-center">
      <span @click="fn.back()" class="mui-action-back"
        ><img class="back-btn" src="../../../static/images/back.png"
      /></span>
      <div class="header-search keyworld-search">
        <i class="search-icon"></i>
        <input
          ref="keywords"
          type="search"
          name=""
          placeholder="请输入关键词搜索"
          v-model="keywords"
        />
      </div>
    </header>
    <div class="organization-tab mui-segmented-control flex-justify-start">
      <a
        @click="loadData('partyaffairsoffice')"
        :class="{ 'mui-active': tabIndex == 0 }"
        class="mui-control-item"
        href="javascript:void(0)"
        >组织动态</a
      >
      <a
        @click="loadData('branch')"
        :class="{ 'mui-active': tabIndex == 1 }"
        class="mui-control-item"
        href="javascript:void(0)"
        >支部动态</a
      >
    </div>

    <div class="mui-page-content message-content">
      <div
        @click="isShowFilter = false"
        class="mui-scroll-wrapper"
        style="padding-top: 90px"
      >
        <div class="mui-scroll mui-scroll-wrapper">
          <!-- --------组织---------------start -->
          <div
            v-if="tabIndex == 0"
            id="organization"
            class="mui-active mui-scroll-wrapper"
            style="padding-top: 90px"
          >
            <div class="organization-lists mui-scroll-wrapper">
              <cube-scroll
                ref="scroll"
                :options="options"
                @pulling-up="onPullingUp"
              >
                <cube-swipe>
                  <transition-group name="swipe" tag="div">
                    <div
                      class="mui-table-view-cell"
                      style="background: #fff"
                      v-for="(data, index) in partyaffairsofficeData"
                      :key="data.id"
                    >
                      <cube-swipe-item
                        ref="swipeItem"
                        :btns="data.btns"
                        :index="index"
                        @btn-click="edit"
                      >
                        <div @click="detail(data)">
                          <div class="mui-slider-handle">
                            <h2
                              class="organization-lists-title"
                              v-html="setSearch(data.title)"
                            ></h2>
                            <div class="organization-lists-time">
                              <span
                                >{{ fn.formateYearSecond(data.createTime) }}
                                {{ data.publisherName }}&nbsp;{{
                                  data.sourceOfPublication
                                }}&nbsp;阅读：{{ data.readingVolume }}</span
                              >
                            </div>
                          </div>
                        </div>
                      </cube-swipe-item>
                    </div>
                  </transition-group>
                </cube-swipe>
                <!-- <div
                  class="text-center no-data"
                  v-if="!loading && partyaffairsofficeData.length === 0"
                >
                  <img src="../../../static/images/no_data.png" alt="" />
                  <p>暂无数据</p>
                </div> -->
                <!-- W noData -->
                <noData
                  v-if="!loading && partyaffairsofficeData.length === 0"
                ></noData>
                <onBottom v-else-if="onBottom"></onBottom>
              </cube-scroll>
            </div>
          </div>
          <!-- --------组织---------------end -->
          <!-- --------支部---------------start -->
          <div
            v-if="tabIndex == 1"
            id="branch"
            class="mui-active mui-scroll-wrapper"
            style="padding-top: 90px"
          >
            <div class="organization-lists mui-scroll-wrapper">
              <cube-scroll
                ref="scroll"
                :options="options"
                @pulling-up="onPullingUp"
              >
                <cube-swipe>
                  <transition-group name="swipe" tag="div">
                    <div
                      class="mui-table-view-cell"
                      v-for="(data, index) in branchData"
                      :key="data.id"
                    >
                      <cube-swipe-item
                        ref="swipeItem"
                        :btns="data.btns"
                        :index="index"
                        @btn-click="edit"
                      >
                        <div @click="detail(data)">
                          <div class="mui-slider-handle">
                            <h2
                              class="organization-lists-title"
                              v-html="setSearch(data.title)"
                            ></h2>
                            <div class="organization-lists-time">
                              <span
                                >{{ fn.formateYearSecond(data.createTime) }}
                                {{ data.publisherName }}&nbsp;{{
                                  data.sourceOfPublication
                                }}&nbsp;阅读：{{ data.readingVolume }}</span
                              >
                            </div>
                          </div>
                        </div>
                      </cube-swipe-item>
                    </div>
                  </transition-group>
                </cube-swipe>
                <!-- <div
                  class="text-center no-data"
                  v-if="!loading && branchData.length === 0"
                >
                  <img src="../../../static/images/no_data.png" alt="" />
                  <p>暂无数据</p>
                </div> -->
                <!-- W noData -->
                <noData
                  v-if="!loading && branchData.length === 0"
                ></noData>
                <onBottom v-else-if="onBottom"></onBottom>
              </cube-scroll>
            </div>
          </div>
          <!-- --------支部---------------end -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import footerbar from "@/components/layout/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      tabIndex: 0,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      keywords: "",
      branchData: [],
      loading: false,
      partyaffairsofficeData: [],
      otherData: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 10,
      currentSourceOfPublicationId: "partyaffairsoffice",
    };
  },
  created() {
    this.loadData("partyaffairsoffice");
  },
  mounted() {
    this.$refs.keywords.focus();
  },
  methods: {
    setSearch(title) {
      let reg = new RegExp(this.keywords, "gi");
      title = title.replace(
        reg,
        '<b class="work-red">' + this.keywords + "</b>"
      );
      return title;
    },
    edit(btn, index) {
      let data;
      if (this.tabIndex === 0) {
        data = this.partyaffairsofficeData[index];
      } else if (this.tabIndex === 1) {
        data = this.branchData[index];
      }
      if (btn.action === "edit") {
        this.$store.state.editAffairsData = null;
        this.$store.state.editAffairsData = data;
        this.$router.push({ name: "affairsAdd" });
      } else if (btn.action === "delete") {
        this.deleteItem(data.id);
      }
    },
    detail(data) {
      let userInfo = this.$store.state.userInfo || {};
      let param = {
        affarisId: data.id,
        partyMemberId: userInfo.partyMemberModel.id,
      };
      loginService.getPartyAffairsInfo(param).then((res) => {
        if (res.code !== 200) {
          return tools.tip(res.message);
        }
        this.$store.state.affairsData = res.data;
        this.$router.push({ path: `/newsDetails/${data.id}` });
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData(this.currentSourceOfPublicationId);
    },
    loadData(sourceOfPublicationId) {
      if (this.currentSourceOfPublicationId !== sourceOfPublicationId) {
        this.pageIndex = 0;
        this.branchData = [];
        this.partyaffairsofficeData = [];
        this.otherData = [];
      }
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        sortOrder: "DESC",
        sortField: "createTime",
      };
      data.title = this.keywords;
      if (sourceOfPublicationId === "partyaffairsoffice") {
        this.currentSourceOfPublicationId = "partyaffairsoffice";
        this.tabIndex = 0;
        data.sourceOfPublicationId = this.currentSourceOfPublicationId;
        data.partyGroupId = "";
      } else if (sourceOfPublicationId === "branch") {
        this.currentSourceOfPublicationId = "branch";
        this.tabIndex = 1;
        data.partyGroupId = this.$store.state.userInfo.partyMemberModel.partyGroupId;
      }
      this.loading = true;
      loginService.getPartyDynamicsList(data).then((res) => {
        this.loading = false;
        if (res.code !== 200) {
          this.$refs.scroll.forceUpdate();
          return tools.tip(
            res.describe === "未查询到资源" ? "已无更多数据" : res.describe
          );
        }
        this.pageIndex++;
        res.data.forEach((v, i) => {
          v.btns = [
            {
              action: "edit",
              text: "修改",
              color: "#f0ad4e",
            },
            {
              action: "delete",
              text: "删除",
              color: "#f00",
            },
          ];
        });
        if (sourceOfPublicationId === "partyaffairsoffice") {
          this.partyaffairsofficeData = this.partyaffairsofficeData.concat(
            res.data
          );
        } else if (sourceOfPublicationId === "branch") {
          this.branchData = this.branchData.concat(res.data);
        } else {
          this.otherData = this.otherData.concat(res.data);
        }
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = !true;
        }, 100);
      });
    },
    affairsAdd() {
      console.log("affairsAdd");
      this.$store.state.editAffairsData = null;
      this.$router.push({ path: `/affairsAdd` });
    },
    search() {
      this.$router.push({ name: "keyword" });
    },
    delPartyAffairsById(_this, id) {
      loginService.delPartyAffairsById(id).then((res) => {
        tools.tip(res.message);
        if (_this.tabIndex === 0) {
          _this.pageIndex = 0;
          _this.partyaffairsofficeData = [];
        } else if (_this.tabIndex === 1) {
          _this.pageIndex = 0;
          _this.branchData = [];
        } else {
          _this.pageIndex = 0;
          _this.otherData = [];
        }
        _this.loadData(_this.currentSourceOfPublicationId);
      });
    },
    deleteItem(id) {
      let _this = this;
      this.$createDialog({
        type: "confirm",
        icon: "",
        title: "温馨提示",
        content: "确定删除记录吗？",
        confirmBtn: {
          text: "确定删除",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消删除",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          _this.delPartyAffairsById(_this, id);
        },
        onCancel: () => {},
      }).show();
    },
  },
  watch: {
    keywords(newValue, oldValue) {
      this.pageIndex = 0;
      this.branchData = [];
      this.partyaffairsofficeData = [];
      this.loadData(this.currentSourceOfPublicationId);
    },
  },
};
</script>
<style>
.mui-table-view-cell {
  background: #fff;
}
</style>
